<template>
  <div class="container">
    <el-card>
        <h3 slot="header">添加商品</h3>
        <section class="account-box">
<!--        <span class="account-box__left">-->
            <el-row :gutter="20">
                <el-form :model="form" label-width="120px">
                    <el-form-item label="收货人：" prop="name">
                        <el-input placeholder="收货人" v-model="form.name"  />
                    </el-form-item>
                    <el-form-item label="联系电话：" prop="phonenum">
                        <el-input placeholder="联系电话"  v-model="form.phonenum"/>
                    </el-form-item>
                    <el-form-item label="收货地址：" prop="address">
                        <el-input placeholder="收货地址" type="textarea"  :rows="2" v-model="form.address" />
                    </el-form-item>
                </el-form>
            </el-row>
<!--        </span>-->
<!--        <span class="account-box__right">-->
<!--            <el-button type="primary" size="small"  @click="payQuick">默认地址</el-button>-->
<!--            <el-button type="primary" size="small"  @click="modifyAddress">修改地址</el-button>-->
<!--        </span>-->
        </section>
    </el-card>
    <el-card>
        <el-table :data="pay_list" stripe>
        <el-table-column prop="productCategoryName" label="商品详情" align="center" />
        <el-table-column prop="stock" label="单价" align="center" />
        <el-table-column prop="number" label="数量" align="center" />
        <el-table-column prop="paytatal" label="小计" align="center" />
        <el-table-column prop="paynow" label="实付" align="center" />
        </el-table>
    </el-card>
    <el-card>
        <h3 slot="header">添加商品</h3>
        <section class="account-box">
        <span class="account-box__left">
            <div>
                <el-form :model="form" label-width="120px">
                    <el-form-item label="商品合计：" prop="name">
                        {{product_total}}元
                    </el-form-item>
                    <el-form-item label="运费：" prop="name">
                       {{freight}}元
                    </el-form-item>
                    <el-form-item label="应付总额：" prop="name">
                        {{pay_total}}元
                    </el-form-item>
                </el-form>
            </div>
        </span>
        <span class="account-box__right">
            <el-button type="primary" size="small"  @click="payQuick">去付款</el-button>
        </span>
        </section>
    </el-card>
  </div>
</template>

<script>
  import { doGenerateOrder, doOrderPaySuccess } from '@/apis/order';
  export default {
    name: 'Payinfo',
    data() {
      return {
        form: {
          name: '',
          phonenum: '',
          address: ''
        },
        pay_list: [],
        product_total: 0,
        freight: 0,
        pay_total: 0,
        product: {}
      };
    },
    methods: {
      async payQuick() {
        const user = this.cache.fetchUser();
        console.log(user);
        // 1, 首先要得到支付的二维码
        // 这里只是使用
        let data = {
          productId: this.product.id,
          quantity: parseInt(this.$route.query.count),
          originalPrice: this.pay_total,
          freightAmount: this.freight,
          status: 0,
          payType: 0,
          receiverName: this.form.name,
          receiverPhone: this.form.phonenum,
          receiverDetailAddress: this.form.address,
          memberId: user.id
        };
        data = {
          reqJson: JSON.stringify(data)
        };
        const res = await doGenerateOrder(data);
        if ((res == null) || (res === undefined)) {
          return;
        }
        const json_id = res.data.match(/(orderId)=(\d+)/);
        console.log(json_id[2]);
        const dataJson = JSON.parse(data.reqJson);
        this.$router.push({
          path: '/counter',
          query: { pay_total: this.pay_total, id: json_id[2], receiverName: dataJson.receiverName, receiverPhone: dataJson.receiverPhone, receiverDetailAddress: dataJson.receiverDetailAddress}
        });
      },
      modifyAddress() {
        console.log(this.form);
      }
    },
    mounted() {
      this.product = this.$route.query.product;
      console.info(this.product);
      const pd = {
        productCategoryName: this.$route.query.product.name,
        stock: this.$route.query.price,
        number: this.$route.query.count,
        paytatal: parseFloat(this.$route.query.price) * parseInt(this.$route.query.count),
        paynow: 0
      };
      this.pay_list.push(pd);
      this.product_total = 0;
      this.freight = 0;
      this.pay_total = 0;
      for (const value of this.pay_list) {
        this.product_total = this.product_total + value.paytatal;
        this.pay_total = this.pay_total + value.paytatal;
      }
    }
  };
</script>
<style lang="scss" type="text/scss" scoped>
$space: 6px;
.box-card {
  margin-top: $space * 2;
}

.el-card {
    margin-bottom: 40px;
    .account-box {
      @include h-btw();
      &__left {
        @include v-center();
      }
      &__right {
        @include v-center();
        span {
          display: block;
          font-size: 12px;
          width: 80px;
          height: 80px;
          line-height: 80px;
          text-align: center;
          background-color: $c1;
          color: white;
          border-radius: 50%;
          margin: 0 10px;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
}

.list {
  display: flex;
  padding: $space;
  flex-wrap: wrap;
  background-color: $c1;
  &__item {
    background-color: white;
    flex-basis: calc(20% - #{$space * 2});
    margin: $space;
    flex-shrink: 0;
    overflow-x: hidden;
  }
}
</style>
